<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当日分时交易量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .refresh-info {
            font-size: 14px;
            color: #666;
        }
        #chart {
            width: 100%;
            height: 500px;
        }
        .controls {
            margin-top: 15px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        button {
            padding: 6px 12px;
            background-color: #4a7bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #3a6be8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">当日分时交易量统计</div>
            <div class="refresh-info">刷新频率：60秒 | 最后刷新：<span id="last-refresh">--:--:--</span></div>
        </div>
        <div id="chart"></div>
        <div class="controls">
            <button id="reset-zoom">重置缩放</button>
            <button id="toggle-auto-refresh">暂停自动刷新</button>
        </div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 生成时间轴（00:00到23:59，每分钟一个点）
        function generateTimeAxis() {
            const times = [];
            for (let hour = 0; hour < 24; hour++) {
                for (let minute = 0; minute < 60; minute++) {
                    times.push(
                        `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
                    );
                }
            }
            return times;
        }
        
        // 生成模拟数据（成功和失败笔数）
        function generateMockData() {
            const successData = [];
            const failData = [];
            
            // 模拟一天中交易量的变化趋势
            for (let i = 0; i < 24 * 60; i++) {
                // 基础交易量，模拟白天交易活跃，夜间交易较少
                const hour = Math.floor(i / 60);
                const isDayTime = hour >= 8 && hour <= 20;
                const baseVolume = isDayTime ? 50 : 10;
                
                // 添加随机波动
                const successVolume = Math.max(0, Math.round(
                    baseVolume * (1 + Math.sin(i / 200) * 0.5) + Math.random() * 20
                ));
                
                // 失败交易量约为成功交易量的5%-15%
                const failRate = 0.05 + Math.random() * 0.1;
                const failVolume = Math.max(0, Math.round(successVolume * failRate));
                
                successData.push(successVolume);
                failData.push(failVolume);
            }
            
            return { successData, failData };
        }
        
        // 初始化图表配置
        function initChart() {
            const times = generateTimeAxis();
            const { successData, failData } = generateMockData();
            
            const option = {
                title: {
                    text: '交易量分时统计',
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                    formatter: function(params) {
                        let result = `时间: ${params[0].name}<br>`;
                        params.forEach(param => {
                            const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${param.color}"></span>`;
                            result += `${marker} ${param.seriesName}: ${param.value} 笔<br>`;
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['成功笔数', '失败笔数'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: 80,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: times,
                    axisLabel: {
                        formatter: function(value) {
                            // 只显示整点时间，避免标签过密
                            if (value.endsWith(':00')) {
                                return value;
                            }
                            return '';
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '交易笔数',
                    axisLabel: {
                        formatter: '{value} 笔'
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                        zoomLock: false
                    },
                    {
                        type: 'slider',
                        start: 0,
                        end: 100,
                        height: 20,
                        bottom: 10
                    }
                ],
                series: [
                    {
                        name: '成功笔数',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#52c41a'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
                                { offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
                            ])
                        },
                        data: successData
                    },
                    {
                        name: '失败笔数',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: '#f5222d'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(245, 34, 45, 0.3)' },
                                { offset: 1, color: 'rgba(245, 34, 45, 0.1)' }
                            ])
                        },
                        data: failData
                    }
                ]
            };
            
            myChart.setOption(option);
        }
        
        // 更新最后刷新时间显示
        function updateLastRefreshTime() {
            const now = new Date();
            const timeString = now.toTimeString().split(' ')[0];
            document.getElementById('last-refresh').textContent = timeString;
        }
        
        // 刷新数据（模拟从服务器获取新数据）
        function refreshData() {
            const { successData, failData } = generateMockData();
            
            // 更新图表数据
            myChart.setOption({
                series: [
                    { data: successData },
                    { data: failData }
                ]
            });
            
            updateLastRefreshTime();
        }
        
        // 初始化
        initChart();
        updateLastRefreshTime();
        
        // 设置自动刷新
        let autoRefreshInterval = setInterval(refreshData, 60000); // 60秒刷新一次
        
        // 处理窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
        
        // 控制按钮事件
        document.getElementById('reset-zoom').addEventListener('click', function() {
            myChart.dispatchAction({
                type: 'dataZoom',
                start: 0,
                end: 100
            });
        });
        
        document.getElementById('toggle-auto-refresh').addEventListener('click', function() {
            const button = this;
            if (autoRefreshInterval) {
                clearInterval(autoRefreshInterval);
                autoRefreshInterval = null;
                button.textContent = '开启自动刷新';
                button.style.backgroundColor = '#ff4d4f';
            } else {
                autoRefreshInterval = setInterval(refreshData, 3000);
                button.textContent = '暂停自动刷新';
                button.style.backgroundColor = '#4a7bff';
            }
        });
    </script>
</body>
</html>